<template>
  <div class="special-case-detail">
    <a-descriptions v-if="caseData" :column="2" bordered>
      <a-descriptions-item label="案例名称">{{ caseData.name }}</a-descriptions-item>
      <a-descriptions-item label="情况类型">{{ caseData.caseType }}</a-descriptions-item>
      <a-descriptions-item label="严重程度">{{ caseData.severity }}</a-descriptions-item>
      <a-descriptions-item label="受影响区域">{{ caseData.affectedArea }}</a-descriptions-item>
      <a-descriptions-item label="受害者人数">{{ caseData.estimatedVictims }}人</a-descriptions-item>
      <a-descriptions-item label="调查状态">{{ caseData.investigationStatus }}</a-descriptions-item>
      <a-descriptions-item label="应对措施" :span="2">{{ caseData.responseActions }}</a-descriptions-item>
    </a-descriptions>

    <div class="actions">
      <a-space>
        <a-button @click="$emit('close')">关闭</a-button>
        <a-button type="primary" @click="$emit('update')">更新</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  caseData: Object
})

const emit = defineEmits(['close', 'update'])
</script>

<style lang="scss" scoped>
.special-case-detail {
  .actions {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
